<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>图片轮播</title>
    <link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
    <script type="text/javascript" src="js/jquery-1.7.js"></script>
</head>
<body>
<h1>图片轮播</h1>
<p class="note"><em>note:图片轮播效果有滚动和淡入淡出2种效果,滚动方向可以有垂直和水平方向;触发按钮由js生成,分为数字和图标2种;有上一张和下一张图片按钮,按钮由js生成.</em></p>
<h2>图片轮播效果一</h2>
    <div id="Slide1" class="slide1">
        <div class="slide_content">
            <ul>
                <li><a title="" href="#"><img alt="" width="420" height="210" src="1.jpg"></a></li>
                <li><a title="" href="#"><img alt="" width="420" height="210" src="2.jpg"></a></li>
                <li><a title="" href="#"><img alt="" width="420" height="210" src="3.jpg"></a></li>
                <li><a title="" href="#"><img alt="" width="420" height="210" src="4.jpg"></a></li>
            </ul>
        </div>
    </div>
    <style type="text/css">
        /* s:.slide1 */
        .slide1 {
            width:422px;
            height:211px;
            position:relative;
        }
        .slide1 .slide_content {
            width:420px;
            height:209px;
            overflow:hidden;
            border:1px solid #dfdfdf;
        }
        .slide1 .slide_content ul {
            float: left;
        }
        .slide1 .slide_content ul li {
            float:left;
            width:420px;
            height:210px;
        }
        .slide1 .slide_content ul img {
            display:block;
        }
        .slide1 .slide_btn_prev,.slide1 .slide_btn_next {
            position: absolute;
            top: 50%;
            margin-top: -21px;
            width: 40px;
            height: 40px;
            background-color: #000;
            cursor: pointer;
            border: 1px solid #aaa;
            border-radius: 4px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            opacity: 0.2;
            filter: alpha(opacity=20);
            font-family: "monospace";
            font-size: 32px;
            font-weight: 700;
            z-index: 10;
        }
        .slide1 .slide_btn_prev {
            left: 5px;
        }
        .slide1 .slide_btn_next {
            right: 5px;
        }
        .slide1 .slide_btn_prev:hover,.slide1 .slide_btn_next:hover {
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        .slide1 .slide_triggle {
            position:absolute;
            right:7px;
            bottom:5px;
            z-index:9;
            overflow:hidden;
        }
        .slide1 .slide_triggle li {
            float:left;
            width: 19px;
            height:18px;
            background:#fff;
            border:1px solid #ff7300;
            cursor:pointer;
            margin-left:5px;
            font-size:12px;
            line-height:18px;
            vertical-align:top;
            text-align: center;
        }
        .slide1 .slide_triggle li a,.slide1 .slide_triggle li a:hover {
            display: block;
            width: 100%;
            color:#ff7300;
        }
        .slide1 .slide_triggle li.cur {
            font-size:14px;
            background:#ff7300;
            border:1px solid #ff7300;
            color:#fff;
            font-weight:700;
        }
        .slide1 .slide_triggle li.cur a,.slide1 .slide_triggle li.cur a:hover {
            color:#fff;
        }
    </style>    
    <script type="text/javascript">
        /*
         ** 名称:图片轮播
         ** 描述:图片轮播效果,鼠标经过数字/小图标,图片切换;
         ** 当鼠标放置轮播图上时,轮播效果暂停
         ** @param {Boolean} 是否自动播放,默认true自动播放
         ** @param {String} 鼠标经过数字(小图标)触发轮播效果,分为mouseover和click事件,默认为mouseover
         ** @param {Number} 每张图片的停留时间,默认是3000ms
         ** @param {Number} 播放速度,默认是800ms
         ** @param {Boolean} 触发效果按钮,默认true是数字,false是图标
         ** @param {Boolean} 是否有上一张/下一张按钮功能,默认true是有,false是无
         ** @param {Boolean} 播放效果,默认true是滚动,false是淡入淡出
         ** @param {Boolean} 滚动方向,默认true是水平方向,false是垂直方向
         */
        (function(){
            $.fn.slideShow = function(options) {
                return $(this).each(function(){
                    var defaults = {
                        auto:            false,
                        evt:             "click",
                        duration:        4000,
                        speed:           370,
                        triggleBtn:      true,
                        number:          true,
                        prevAndNextBtn:  true,
                        scroll:          true,
                        horizontal :     true
                    };
                    options = $.extend(defaults, options);
                    var $this = $(this),
                    $slide_content = $(".slide_content",$this),
                    liItems = $slide_content.children().children("li"),
                    len = liItems.length,
                    curIndex = 0,//初始索引值
                    liItemList = [],//li对象数组
                    triggleItemList = [],//触发按钮对象数组
                    itemWid = liItems.width(),//li单项宽度
                    itemHei = liItems.height(),//li单项高度
                    slideTimeout,//
                    isSlide = true;
                    // slideTimeout = true;
                    /*
                     ** 包含图片li jQ对象的数组
                     ** 通过索引取li对象,而不是eq方法
                     */
                    for (var i = 0; i < liItems.length; i++) {
                        liItemList.push(liItems.eq(i));
                    };
                    //滚动效果,除第一个外其余均隐藏
                    if(options.scroll){
                        liItems.not(":eq(0)").hide();
                        //水平滚动的话就给ul元素设置2倍元素宽度
                        //把当前选中项塞在之前选中项的前面或后面
                        if(options.horizontal){
                            $slide_content.children("ul").width(itemWid * 2)
                        }
                    }else{
                    //淡入淡出效果,给每个li元素赋值absolute属性,并且只显示第一个
                        $slide_content.children("ul>li").css({
                            "position":"absolute",
                            "top":0,
                            "left":0,
                            "zIndex":1
                        }).not(":eq(0)").hide();
                    }
                    /*
                     ** 描述:数组按钮html代码
                     ** @param {Number} imgNum 图片的数量 
                     */
                    var numberHtml = function(imgNum) {
                        var tempHtml = "<div class='slide_triggle'>";
                        tempHtml += "<ol><li class='cur' data-index='0'><a href='#' title='1'>1</a></li>";
                        for(var i = 1; i < imgNum; i++){
                            tempHtml += "<li data-index='"+ i +"'><a href='#' title='"+ (i + 1) +"'>"+ (i + 1) +"</a></li>";
                        }
                        tempHtml += "</ol>";
                        return tempHtml += "</div>";
                    };
                    /*
                     ** 描述:图标按钮html代码
                     ** @param {Number} imgNum 图片的数量 
                     */
                    var iconHtml = function(iconNum) {
                        var tempHtml = "<div class='slide_triggle'>";
                        tempHtml += "<ul><li class='cur' data-index='0'><a href='#' title=''></a></li>";
                        for(var i = 1; i < iconNum; i++){
                            tempHtml += "<li data-index='"+ i +"'><a href='#' title=''></a></li>";
                        }
                        tempHtml += "</ul>";
                        return tempHtml += "</div>";
                    };
                    //上一张/下一张按钮
                    if(options.prevAndNextBtn) {
                        var btnHtml = '<a class="slide_btn_prev" title="上一张">&lt;</a><a class="slide_btn_next" title="下一张">&gt;</a>';
                        $(btnHtml).appendTo($this);
                        $this.on("click",".slide_btn_prev",function(){
                            if(!isSlide) return false;
                            isSlide = false;
                            var _prevIndex = curIndex - 1;
                            if(_prevIndex < 0) _prevIndex = _prevIndex + len;
                            slideAction(curIndex,_prevIndex,function(){
                                isSlide = true;
                            });
                            curIndex = _prevIndex;
                            return false;
                        })
                        $this.on("click",".slide_btn_next",function(){
                            if(!isSlide) return false;
                            isSlide = false;
                            var _nextIndex = (parseInt(curIndex) + 1) % len;
                            slideAction(curIndex,_nextIndex,function(){
                                isSlide = true;
                            });
                            curIndex = _nextIndex;
                            return false;
                        })
                    }
                    // 按钮html代码
                    if(options.triggleBtn){
                        var slide_triggleHtml = options.number ? numberHtml(len) : iconHtml(len);
                        $(slide_triggleHtml).appendTo($this);
                        // 按钮jQ对象的数组
                        for (var i = 0; i < $this.find(".slide_triggle").children().children("li").length; i++) {
                            triggleItemList.push($this.find(".slide_triggle").children().children("li").eq(i));
                        };
                    }
                    /*
                     ** 描述:图片淡入淡出效果
                     ** @param {Object} $cur 当前显示的li对象
                     ** @param {Object} $next 即将要显示的li对象
                     */
                    var fadeAction = function(_prevIndex,_curIndex){
                        liItemList[_prevIndex].css("zIndex",1).fadeOut(options.speed);
                        liItemList[_curIndex].css("zIndex",5).fadeIn(options.speed,function(){
                            if(_callback) _callback();
                        });
                    };
                    /*
                     ** 描述:图片滚动效果
                     ** @param {Boolean} 滚动方向,true是水平方向,false是垂直方向
                     ** @param {Boolean} 上一个选中元素
                     ** @param {Boolean} 当前选中元素
                     */
                    var moveAction = function(_prevIndex,_curIndex,_callback) {
                        //显示选中项
                        liItemList[_curIndex].show();
                        //水平方向滚动
                        if(options.horizontal){
                            //如果当前选中项的大于之前选中项,图片就向左滚动
                            if(_prevIndex < _curIndex){
                                $slide_content.children("ul")
                                .animate({"marginLeft":-itemWid},options.speed,function(){
                                    $slide_content.children("ul").css("marginLeft",0);
                                    $slide_content.children("ul").children("li:visible").eq(0).hide();
                                    if(_callback) _callback();
                                })
                            }else {//如果当前选中项的小于之前选中项,图片就向右滚动
                                $slide_content.children("ul")
                                .css("marginLeft",-itemWid)
                                .animate({"marginLeft":0},options.speed,function(){
                                    $slide_content.children("ul").children("li:visible").eq(1).hide();
                                    if(_callback) _callback();
                                })
                            }
                        }else{//垂直方向滚动
                            if(_prevIndex < _curIndex){
                                $slide_content.children("ul")
                                .animate({"marginTop":-itemHei},options.speed,function(){
                                    $slide_content.children("ul").css("marginTop",0);
                                    $slide_content.children("ul").children("li:visible").eq(0).hide();
                                    if(_callback) _callback();
                                })
                            }else {//如果当前选中项的小于之前选中项,图片就向右滚动
                                $slide_content.children("ul")
                                .css("marginTop",-itemHei)
                                .animate({"marginTop":0},options.speed,function(){
                                    $slide_content.children("ul").children("li:visible").eq(1).hide();
                                    if(_callback) _callback();
                                })
                            }
                        }
                    };
                    // 通过判断切换效果调用fadeAction或moveAction函数实现播放
                    var slideAction = function(_prevIndex,_curIndex,_callback) {
                        // _curIndex % len取余,因为moveAction方法要判断_curIndex==len
                            _curIndex = _curIndex % len;
                            if(options.scroll){
                                moveAction(_prevIndex,_curIndex,_callback);
                            }else{
                                fadeAction(_prevIndex,_curIndex,_callback);
                            }
                            if(options.triggleBtn){
                                //之前选中按钮移除选中状态
                                triggleItemList[_prevIndex].removeClass("cur");
                                //当前选中按钮添加选中状态
                                triggleItemList[_curIndex].addClass("cur");
                            }
                            return curIndex = _curIndex;
                    }
                    //自动播放
                    var autoSlide = function(_curIndex){
                        var _nextIndex = (parseInt(_curIndex) + 1) % len;
                        slideAction(_curIndex,_nextIndex);
                        return curIndex = _nextIndex;
                    }
                    var interval;
                    //自动播放
                    if(options.auto){
                        interval = setInterval(function(){
                            autoSlide(curIndex);
                        },options.duration);
                        //鼠标移入slide对象
                        $this.on("mouseover",function(){
                            clearInterval(interval);
                        //鼠标移开slide对象
                        }).on("mouseout",function(){
                            clearInterval(interval);
                            interval = setInterval(function(){
                                autoSlide(curIndex);
                            },options.duration);
                        })
                    }
                    //鼠标触发按钮事件
                    if(options.triggleBtn){                    
                        $this.find(".slide_triggle").children().children("li").each(function(){
                            $(this).on(options.evt,function(){
                                if($(this).hasClass("cur")) return;
                                // slideTimeout = false;
                                var _nextIndex = $(this).attr("data-index");
                                clearTimeout(slideTimeout);
                                slideTimeout = setTimeout(function(){
                                    slideAction(curIndex,_nextIndex);
                                },300)
                                return false;
                            })
                        })
                    }
                })
            };
        })(jQuery);
    </script>
    <script type="text/javascript">
        $("#Slide1").slideShow();
    </script>
    <h2>图片轮播效果二</h2>
    <div id="slide2" class="slide2">
        <div class="slide_content">
            <ul>
                <li><img alt="" width="420" height="210" src="1.jpg"><a title="" href="#"><p class="slide_tip">2014世界杯欧洲区预选赛展开多场争夺，葡萄牙在焦点战中1球</p></a></li>
                <li><img alt="" width="420" height="210" src="2.jpg"><a title="" href="#"><p class="slide_tip">2014世界杯欧洲区预选赛展开多场争夺，葡萄牙在焦点战中1球</p></a></li>
                <li><img alt="" width="420" height="210" src="3.jpg"><a title="" href="#"><p class="slide_tip">2014世界杯欧洲区预选赛展开多场争夺，葡萄牙在焦点战中1球</p></a></li>
                <li><img alt="" width="420" height="210" src="4.jpg"><a title="" href="#"><p class="slide_tip">2014世界杯欧洲区预选赛展开多场争夺，葡萄牙在焦点战中1球</p></a></li>
            </ul>
        </div>
    </div>
    <style type="text/css">
        /* s:.slide2 */
        .slide2 {
            width:422px;
            height:240px;
            position:relative;
        }
        .slide2 .slide_content {
            width:420px;
            height:209px;
            overflow:hidden;
            border:1px solid #dfdfdf;
        }
        .slide2 .slide_content ul {
            float: left;
        }
        .slide2 .slide_content li {
            float:left;
            position: relative;
            width:420px;
            height:210px;
        }
        .slide2 .slide_content li img {
            display:block;
        }
        .slide2 .slide_content li .slide_tip {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 7;
            width: 100%;
            text-indent: 5px;
            padding-top: 6px;
            padding-bottom: 6px;
            color: #fff;
            /*font-weight: 700;*/
            /*text-indent: 15px;*/
            font-size: 14px;
            background-color: rgba(0,0,0,0.7);
            filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77000000', EndColorStr='#77000000');
        }
        .slide2 .slide_btn_prev,.slide2 .slide_btn_next {
            position: absolute;
            top: 50%;
            margin-top: -21px;
            width: 40px;
            height: 40px;
            background-color: #000;
            cursor: pointer;
            border: 1px solid #aaa;
            border-radius: 4px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            opacity: 0.2;
            filter: alpha(opacity=20);
            font-family: "monospace";
            font-size: 32px;
            font-weight: 700;
            z-index: 10;
        }
        .slide2 .slide_btn_prev {
            left: 5px;
        }
        .slide2 .slide_btn_next {
            right: 5px;
        }
        .slide2 .slide_btn_prev:hover,.slide2 .slide_btn_next:hover {
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        .slide2 .slide_triggle {
            position:absolute;
            left:0;
            bottom:8px;
            z-index:9;
            overflow:hidden;
            text-align: center;
            width: 100%;
        }
        .slide2 .slide_triggle li {
            display:inline-block;width:10px;height:10px;margin:0 4px;background-color: #fafafa;text-indent:-10em;overflow:hidden;cursor:pointer;border-radius:5px;box-shadow:1px 1px 1px #A9A9A9 inset;background:#D3D3D3;            
        }
        .slide2 .slide_triggle li.cur {
            background-color: #b6d5e8;box-shadow:1px 1px 1px #1678A0 inset;background:#5AA4C9;
        }
    </style>
    <script type="text/javascript">
        $("#slide2").slideShow({
            number: false,
            prevAndNextBtn: false,
            evt: "mouseover"
        });
    </script>
    <h2>图片轮播效果三</h2>
    <div id="Slide3" class="slide3">
        <div class="slide_content">
            <ul>
                <li>
                    <div>
                        <ul>
                            <li>
                                <a href="">
                                    <img src="2.jpg" width="128" height="164" alt="" />
                                    <p>致命黑兰</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="2.jpg" width="128" height="164" alt="" />
                                    <p>逆光飞翔</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="2.jpg" width="128" height="164" alt="" />
                                    <p>王牌情敌</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div>
                        <ul>
                            <li>
                                <a href="">
                                    <img src="3.jpg" width="128" height="164" alt="" />
                                    <p>百万爱情宝贝</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="3.jpg" width="128" height="164" alt="" />
                                    <p>圣龙奇兵大冒险</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="3.jpg" width="128" height="164" alt="" />
                                    <p>魔境仙踪</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- <li>
                    <div>
                        <ul>
                            <li>
                                <a href="">
                                    <img src="1.jpg" width="128" height="164" alt="" />
                                    <p>侏罗纪公园</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="1.jpg" width="128" height="164" alt="" />
                                    <p>天机·富春山居图</p>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="1.jpg" width="128" height="164" alt="" />
                                    <p>星际迷航：暗黑无界</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <style type="text/css">
        /* s:.slide3 */
        .slide3 {
            width:422px;
            height:210px;
            position:relative;
            padding-top: 24px;
        }
        .slide3 .slide_content {
            width:420px;
            height:209px;
            overflow:hidden;
            padding-top: 15px;
            border-top:1px solid #dfdfdf;
        }
        .slide3 .slide_content ul {
            float: left;
        }
        .slide3 .slide_content li {
            float:left;
            position: relative;
            width:420px;
            overflow: hidden;
        }
        .slide3 .slide_content li div {
            width: 120%;
        }
        .slide3 .slide_content li li {
            width: 128px;
            margin-right: 18px;
            text-align: center;
        }
        .slide3 .slide_content li li p {
            width: 100%;
        }
        .slide3 .slide_content li img {
            display:block;
            margin-bottom: 5px;
        }
        .slide3 .slide_content li li a {
            color: #666;
            font-size: 14px;
        }
        .slide3 .slide_btn_prev,.slide3 .slide_btn_next {
            position: absolute;
            top: 0;
            background:url(http://img3.douban.com/pics/movie/slide_swithc_2.png) no-repeat;
            width: 18px;
            height: 18px;
            text-indent: -1000em;
            cursor: pointer;
        }
        .slide3 .slide_btn_prev {
            background-position:0 0;
            right: 28px;
        }
        .slide3 .slide_btn_next {
            background-position:-18px 0;
            right: 3px;
        }
        .slide3 .slide_btn_prev:hover,.slide3 .slide_btn_next:hover {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        .slide3 .slide_triggle {
            position:absolute;
            left:0;
            bottom:8px;
            z-index:9;
            overflow:hidden;
            text-align: center;
            width: 100%;
        }
        .slide3 .slide_triggle li {
            display:inline-block;width:10px;height:10px;margin:0 4px;background-color: #fafafa;text-indent:-10em;overflow:hidden;cursor:pointer;border-radius:5px;box-shadow:1px 1px 1px #A9A9A9 inset;background:#D3D3D3;            
        }
        .slide3 .slide_triggle li.cur {
            background-color: #b6d5e8;box-shadow:1px 1px 1px #1678A0 inset;background:#5AA4C9;
        }
    </style>
    <script type="text/javascript">
        $("#Slide3").slideShow({
            triggleBtn: false,
            prevAndNextBtn: true,
            evt: "mouseover"
        });
    </script>



</body>
</html>